<template>
  <h1>日期时间选择器组件</h1>
  <el-date-picker
      type="date"
      v-model="rq"
      @change="console.log(rq)"
      placeholder="请选择日期时间"
      format="YYYY-MM-DD"
      value-format="YYYY-MM-DD"
  >
  </el-date-picker>
  <hr>
  <el-date-picker
      type="datetime"
      v-model="sj"
      @change="console.log(sj)"
      placeholder="请选择日期时间"
      format="YYYY-MM-DD HH:mm:ss"
      value-format="YYYY-MM-DD HH:mm:ss"
  >
  </el-date-picker>
  <hr>
  <el-date-picker
      type="datetimerange"
      v-model="fw"
      placeholder="请选择日期时间"
      format="YYYY-MM-DD HH:mm:ss"
      value-format="YYYY-MM-DD HH:mm:ss"
      @change="f"
      start-placeholder="请选择出发时间"
      end-placeholder="请选择到达时间"
      range-separator="|"
  >
  </el-date-picker>
</template>

<script setup>
import {ref} from "vue";

const rq = ref('');
const sj = ref('');
const fw = ref([]);
const f = ()=>{
  console.log(fw.value)
  console.log(fw.value[0])
  console.log(fw.value[1])
}

</script>

<style scoped>

</style>